<template>
  <view>
    <radio-group @change="onRadioChange">
      <view class="radio-list">
        <view class="radio-item" v-for="(item, index) in dataList" :key="index">
          <radio :value="item.value + ''" :checked="item.selected" color="#0BB78E" style="transform:scale(0.7)" />
          <text>{{item.text}}</text>
        </view>
      </view>
    </radio-group>
  </view>
</template>

<script>
  export default {
    props: {
      value: [String, Number],
      options: Array
    },
    data() {
      return {
        range: [],
        dataList: []
      }
    },
    watch: {
      value(newVal) {
        this.dataList = this.getDataList(newVal);
      },
      options(newVal) {
        this.initDataList(newVal);
      }
    },
    created() {
      this.initDataList(this.options);
    },
    methods: {
      initDataList(options) {
        this.range = options;
        this.dataList = this.getDataList(this.value);
      },
      getDataList(value) {
        let dataList = JSON.parse(JSON.stringify(this.range));
        let list = [];
        dataList.forEach(item => {
          item.disabled = item.disable || item.disabled || false
          item.selected = item.value === value;
          list.push(item);
        });
        return list;
      },
      onRadioChange(e) {
        let value = e.detail.value;
        let emitValue = '';
        const item = this.range.find(item => (item.value + '') === value);
        if (item) {
          emitValue = item.value;
        }

        this.$emit('input', emitValue);
        this.$emit('change', emitValue);
      }
    }
  }
</script>

<style lang="scss">
  .radio-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .radio-item:not(:last-of-type) {
      margin-right: 10px;
    }
  }
</style>